<template>
	<view class="me-main-view" :style="{'--background': bgColor}">
		<view class="me-main-header">
			<view class="me-main-header-top">
				<view class="head-img"><image :src="buildHeaderImg()" ></image></view>
				<view class="head-info" v-if="isWx()">
					<button @getphonenumber="getPhoneNumber" v-if="!phone" size="mini" :plain="true" open-type="getPhoneNumber" class="get-phone-btn">获取手机号码</button>
					<span class="show-cur-phone" v-if="phone">{{rebuildPhone()}}</span>
				</view>
			</view>
			<view class="single-line" v-if="canShowMoney()">当前余额：{{moneybag.money}} 元
				<button v-if="recommendConfig.autoCash==='0'" :plain="true" type="primary" @click="onCashOut()" :disabled="checkCannotCashOut()" size="mini" class="cash-out-btn">提现</button>
				<span class="is-auto-cash" v-if="recommendConfig.autoCash==='1'">我店已开通自动提现,无需手动操作</span>
				
				<p class="cash-remind">提现条件：余额须大于1元，每天最多可提现一次</p>
			</view>
			<view class="single-line" v-if="canShowMaster()">
				我的{{masterCardConfig.name}}：{{ownCard.amount}} 张
				<p class="cash-remind">一张{{masterCardConfig.name}}至少可优惠<b class="money-show">{{buildMinDiscountMoney()}}</b>元</p>
				
				<p class="cash-remind">每次限用一张，分享首页给好友即可获得更多{{masterCardConfig.name}}</p>
			</view>
			
			<view class="single-line">
				<!-- <button class="single-opt-btn" size="mini" type="warn" @click="onOptClick('charge')">充值</button>
				<button class="single-opt-btn" size="mini" type="primary" @click="onOptClick('detail')">明细</button> -->
				<button class="single-opt-btn" size="mini" type="warn"  @click="onOptClick('shop')" v-if="authLevel<=2 && authLevel>0">门店管理</button>
				<button class="single-opt-btn" size="mini" type="primary"  @click="onOptClick('room')" v-if="authLevel<=5 && authLevel>0">房间管理</button>
				<button class="single-opt-btn" size="mini" type="warn"  @click="onOptClick('activity')" v-if="authLevel<=2 && authLevel>0">活动管理</button>
			</view>
		</view>
		
		<view class="lock-info-view" v-if="lockList.length>0">
			<view class="lock-info-title">门锁电量信息：</view>
			<view class="single-lock" v-for="lock in lockList" :key="lock.deviceId">
				<view class="left">
					<view class="name">{{lock.name}}</view>
					<view class="time">{{lock.time}}</view>
				</view>
				<view class="right" :class="lock.power>30?'blue':'red'">
					{{lock.power}}%
				</view>
			</view>
		</view>
		<auto-loginCheck v-if="showLogoin"/>
		
		<auto-contactMe :showCorp="true"/>
		
		<auto-modal :show="showCashResult" @onOpt="showCashResult = false" @onClose="showCashResult = false" 
		:title="'提现结果:'+(cashResult.flag?'提现成功':'提现失败')" :cancel="false" okText="我知道了">
			<p>提现结果：{{cashResult.flag?'提现成功':'提现失败'}}</p>
			<p v-if="cashResult.flag">提现成功：1小时内到账，请注意查收</p>
			<p v-else>失败原因：{{cashResult.msg}}，请与管理员联系！</p>
		</auto-modal>
	</view>
</template>

<script>
var that;
import common from "@/common/common.js";
import wxLogin from "@/common/wxLogin.js";
export default {
	data() {
		return {
			bgColor: "",
			showLogoin: false,
			phone: '',
			authLevel: 0,
			
			ownCard: {}, //
			masterCardConfig: {},
			recommendConfig: {},
			moneybag: {},
			loaded: false,
			isCashing: false,
			
			cashResult: {},
			showCashResult: false,
			lockList: [],
		}
	},
	onLoad(options) {
		that = this;
		const configData = common.getCurShop();
		console.log(configData)
		that.bgColor = configData.navBgColor;
		
		const openid = common.getOpenid();
		// console.log("========openid==>>>", openid)
		const customer = common.getCustomer();
		// console.log("======customer===>>>", customer)
		if(customer && customer.phone) {
			that.phone = customer.phone;
		}
		
		that.checkHasAuth();
		that.loadData();
	},
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		onCashOut: function() {
			that = this;
			that.isCashing = true;
			that.$request.get("/center/onCashOut", {moneybagId: this.moneybag.id}).then((res) => {
				console.log(res)
				that.cashResult = res;
				that.showCashResult = true;
			})
		},
		isWx: function() {
			return this.$common.checkFromSource()==='wx';
		},
		onOptClick: function(key) {
			if(key==='charge') { //充值
				
			} else if(key==='detail') { //明细
				
			} else if(key==='shop') { //门店管理
				uni.navigateTo({ //跳转
					url: "/pages/shop/editShop"
				})
			} else if(key==='room') { //房间管理
				uni.navigateTo({ //跳转
					url: "/pages/room/listRoom"
				})
			} else if(key==='activity') { //活动
				uni.navigateTo({ //跳转
					url: "/pages/activity/index"
				})
			}
		},
		loadData: function() {
			that = this;
			that.$request.get("/center/index", {}).then((res) => {
				that.moneybag = res.moneybag;
				that.recommendConfig = res.recommend;
				that.ownCard = res.ownCard;
				that.masterCardConfig = res.masterCardConfig;
				that.loaded = true;
			})
		},
		checkCannotCashOut() {
			return (this.moneybag.money<1) || this.isCashing || this.recommendConfig.autoCash === '1';
		},
		canShowMoney: function() {
			const recommend = this.recommendConfig || {};
			// console.log("========", recommend)
			return recommend.id && recommend.status == '1' && (recommend.firstPercent>0 || recommend.normalPercent>0);
		},
		canShowMaster: function() { //是否显示听用卡
			const config = this.masterCardConfig || {};
			return config.id && config.status == '1' && (config.discountMoney>0);
		},
		checkHasAuth: function() {
			that = this;
			that.$request.get("/auth/checkHasShopAuth", {}).then((res)=> {
				// console.log("=======has auth ::=====", res);
				that.authLevel = res.authLevel;
				if(res.authLevel<=5 && res.authLevel>0) {
					that.queryLockInfo();
				}
			})
		},
		buildMinDiscountMoney() {
			const minHours = this.$config.MIN_HOUR;
			const discountMoney = this.masterCardConfig.discountMoney;
			return (discountMoney*minHours).toFixed(2);
		},
		buildHeaderImg: function() {
			return "../../static/me.png"
		},
		getPhoneNumber: function(e) {
			wxLogin.getPhoneForWx(e.detail).then((res)=> {
				const phone = res.data.phone;
				this.phone = phone;
			});
		},
		rebuildPhone: function() {
			const phone = this.phone;
			return phone.substring(0, 3)+"****"+(phone.substring(7, 11));
		},
		queryLockInfo: function() {
			that = this;
			that.$request.get('/center/queryLockStatus', {}).then((res) => {
				// console.log(res);
				that.lockList = res.data;
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background:#F7f7f7;
}
.me-main-view {
	width: calc(100vw - 20px);
	padding: 10px; padding-top: 20px; padding-bottom: 100rpx;
}
.me-main-header {
	width: 90%; margin-left: 5%; background:#FFF; border-radius: 10px;
	box-shadow: 0 0 5px #a8a8a8; padding-bottom: 5px;
}
.me-main-header-top {
	display: flex;
}
.me-main-header-top .head-img {
	background:#b9dcbe; border:5px #1d3733 solid; padding: 6px; border-radius: 60px;
	margin:-20px 0px 0px 20px;
}
.me-main-header-top .head-img image {
	width: 40px; height: 40px; 
}
.me-main-header-top .head-info {
	flex: 1; text-align: center;
}
.me-main-view {
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.me-main-view::after {
  content: '';
  width: 120%;
  height: 200rpx;
  position: absolute;
  left: -10%;     //椭圆左边隐藏10%，右边隐藏10%
  top: 0;
  border-radius: 0 0 70% 70%;  //左上角，右上角，右下角，左下角
  background: linear-gradient(to top, #3a6f66, var(--background));//var(--background);
  z-index: -1;
}
.get-phone-btn {
	border:none; margin-top: 7px;
}
.show-cur-phone {
	margin-top: 7px; display: block; font-size: 28rpx; border-bottom: 1px #ddd dotted; padding-bottom: 10px; color:#666; margin-right: 10px;
}
.single-line {
	width: calc(100% - 20px); padding:8px 10px; font-size: 28rpx;
	border-bottom: 1px #ddd dotted;
}
.single-line:last-child {
	border: none;
}
.single-opt-btn {
	margin-right: 5px;
}


button.cash-out-btn {
	display: inline; background:#830; color:#FFF; padding: 0px; border: none; margin-left: 8rpx; font-size: 24rpx; padding: 8rpx 20rpx;
}

.is-auto-cash {
	font-size: 24rpx; color:#999; padding-left: 10rpx;
}

.cash-remind {
	font-size: 24rpx; color:#555; line-height: 1.8;
}
.money-show {
	display: inline; color:#F00;
}

.lock-info-view {
	margin-top: 40rpx; 
	border:1px #830 solid; padding: 10rpx;
	width: calc(100% - 20rpx); border-radius: 5px; background:#fafafa;
	.lock-info-title {
		margin-top: 20rpx; border-bottom: 10rpx #830 solid; padding-bottom: 20rpx;
	}
	
	.single-lock {
		display: inline-flex; width: 100%; margin: 18rpx 0px; border-bottom: 1px #ddd solid;
		
		.left {
			flex: 1; 
			.name {
				font-size: 30rpx; color:#333; line-height: 50rpx;
			}
			.time {
				font-size: 26rpx; color:#888; line-height: 34rpx;
			}
		}
		
		.right {
			width: 120rpx;line-height: 84rpx; text-align: center; font-weight: bold;
		}
	}
}
</style>
